<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>MatrixView Sample: Desktop</title>				
		<style type="text/css">
			@import "../themes/claro/MatrixView.css";
			@import "matrixview.css";
			@import "../themes/claro/MatrixView_rtl.css";
			@import "matrixview_rtl.css";
			@import "../../../dojo/resources/dojo.css";
			@import "../../../dijit/themes/dijit.css";
			@import "../../../dijit/themes/claro/claro.css";
		</style>			
	</head>
	
	<body class="claro" dir="rtl">
		<script type="text/javascript" 
						data-dojo-config="async: true, parseOnLoad: true"
		 				src="../../../dojo/dojo.js"></script>
		
			<script type="text/javascript">

			require(["dojo/ready", "dojo/_base/declare", "dojo/on", "dojo/date/locale", "dojo/parser", "dojo/date", "dojo/_base/lang",
					"dojo/dom", "dojo/dom-construct", "dojo/dom-class", "dojo/_base/window",
					"dijit/registry", "dojo/query", "dojox/calendar/MatrixView", "dojox/calendar/Keyboard", "dojox/calendar/Mouse", 
					"dojox/calendar/HorizontalRenderer", "dojox/calendar/LabelRenderer", "dojox/calendar/ExpandRenderer", "dojo/store/Memory", "dojo/store/Observable",
					"dijit/form/VerticalSlider", "dijit/form/NumberSpinner", 
					"dijit/form/ComboBox", "dijit/form/DateTextBox", "dijit/form/TimeTextBox", "dijit/form/TextBox", 
					"dijit/form/Button", "dijit/TitlePane", "dijit/Tooltip", 
					"dijit/form/CheckBox", "dojo/_base/fx", "dijit/_BidiSupport"],

				function(ready, declare, on, locale, parser, date, lang, dom, domConstruct, domClass, win, registry, query,
					MatrixView, CalendarKeyboard, CalendarMouse, HorizontalRenderer, LabelRenderer, ExpandRenderer, Memory, Observable, VerticalSlider, 
					NumberSpinner, ComboBox, DateTextBox, TimeTextBox, TextBox, Button, TitlePane, Tooltip, CheckBox, fx){

					ready(function(){

						// singleton
						win.doc.appState = {
							moveDisabledMap: {},
							resizeDisabledMap: {}
						};
						
						var mergeDateTime = function(isStart){
							var dateEditor = isStart ? itemStartDateEditor : itemEndDateEditor;
							var timeEditor = isStart ? itemStartTimeEditor : itemEndTimeEditor;
							var date = dateEditor.get("value");
							var time = timeEditor.get("value");
							date.setHours(time.getHours());
							date.setMinutes(time.getMinutes());
							return date;
						};
						
						var addLogEntry = function(name, content){
							var tr = domConstruct.create("tr", null, dom.byId("logBody"), "first");
							var td = domConstruct.create("td", null, tr);
							td.appendChild(win.doc.createTextNode(locale.format(new Date(), {selector:"time", timePattern:"h:mm:ss"})));
							var td = domConstruct.create("td", null, tr);
							td.appendChild(win.doc.createTextNode(name));
							td = domConstruct.create("td", null, tr);
							td.appendChild(win.doc.createTextNode(content));
						};

						// Calendar model creation
						
						var dateClassObj = Date;
						
						var modelBase = [
							{day: 5, start: [0,0], duration: 1440, allDay:true},
							{day: 5, start: [6,0], duration: 240}/*,
							{day: 1, start: [10,0], duration: 240},
							{day: 1, start: [16,0], duration: 60},
							{day: 2, start: [8,0], duration: 120},
							{day: 2, start: [10,0], duration: 120},
							{day: 2, start: [16,0], duration: 120},
							{day: 3, start: [8,0], duration: 1440*2},
							{day: 5, start: [0,0], duration: 1440, allDay:true},
							{day: 6, start: [0,0], duration: 2*1440, allDay:true}*/
						];
						
						// TODO manage first day of week
						var floorToWeek= function(d){
							d.setHours(0);
							d.setMinutes(0);
							d.setSeconds(0);
							d.setMilliseconds(0);
							d = date.add(d, "day", -d.getDay());
							return d;
						};
						
						var someData = [];
						
						var startOfWeek = new dateClassObj();
						startOfWeek = floorToWeek(startOfWeek);
						
						startDateEditor.set("value", startOfWeek);
						var id;
						for (var w=0; w<1; w++) {
							for (var i=0; i<modelBase.length; i++) {
								id = (w*modelBase.length)+i;
								var newObj = {
									id: id,
									summary: "New Event " + id,
									startTime: new dateClassObj(startOfWeek.getTime()),
									endTime: new dateClassObj(startOfWeek.getTime()),
									calendar: i%2 == 0 ? "cal1" : "cal2"
								};
	
								newObj.startTime = date.add(newObj.startTime, "day", 6);
								newObj.startTime.setHours(modelBase[i].start[0]);
								newObj.startTime.setMinutes(modelBase[i].start[1]);
	
								newObj.endTime = date.add(newObj.startTime, "minute", modelBase[i].duration);
								
								if(modelBase[i].allDay != undefined){
									newObj.allDay = modelBase[i].allDay; 
								}
	
								someData.push(newObj);
							}
							startOfWeek = date.add(startOfWeek, "day", 7);
						}
						
						id++;
						
						// Calendar creation & configuration
						
						matrixView = declare([MatrixView, CalendarKeyboard, CalendarMouse])({
							
							store: new Observable(new Memory({data: someData})),		
							horizontalRenderer: HorizontalRenderer,
							labelRenderer: LabelRenderer,
							expandRenderer: ExpandRenderer,
							verticalGap:4,
							cssClassFunc: function(item){
								return item.calendar == "cal1" ? "Calendar1" : "Calendar2"
							},
							isItemMoveEnabled: function(item, kind){
								return this.isItemEditable(item, kind) && win.doc.appState.moveDisabledMap[item.id] !== true;
							},
							isItemResizeEnabled: function(item, kind){
								return this.isItemEditable(item, kind) && win.doc.appState.resizeDisabledMap[item.id] !== true;
							}
						}, "calendarNode");
						
						// matrix view is *not* in a dijit container, must register resize handler
						window.onresize = function(e){
							matrixView.resize(e);
						};

						// Events management
						
						matrixView.on("gridDoubleClick", function(e){

							// create a event when double-clicking on grid.
							var d = matrixView.floorToDay(e.date, true);

							var item = {
								id: id,
								summary: "New event " + id,
								startTime: d,
								endTime: date.add(d, "day", 1),
								calendar: id % 2 == 0 ? "cal1" : "cal2"
							};
							id++;
							matrixView.store.add(item);
							
							matrixView.set("selectedItem", item);
							matrixView.set("focusedItem", item);
							onMatrixViewChange(item);
						});

						matrixView.on("rowHeaderClick", function(e){
							var expIndex = matrixView.getExpandedRowIndex();
							if(expIndex == e.index){
								matrixView.collapseRow();
							}else if(expIndex == -1){
								matrixView.expandRow(e.index);
							}else{
								var h = matrixView.on("expandAnimationEnd", function(){
									h.remove();
									matrixView.expandRow(e.index);
								});
								matrixView.collapseRow();
							}
						});
						
						var editedItem;
						
						var onMatrixViewChange = function(item){

							if (item == null){
								editedItem = null;
								
								itemSummaryEditor.set("value", null);
								itemSummaryEditor.set("disabled", true);
								
								itemStartDateEditor.set("value", null);
								itemStartDateEditor.set("disabled", true);
								
								itemStartTimeEditor.set("value", null);
								itemStartTimeEditor.set("disabled", true);
								
								itemEndDateEditor.set("value", null);
								itemEndDateEditor.set("disabled", true);
								
								itemEndTimeEditor.set("value", null);
								itemEndTimeEditor.set("disabled", true);
								
								updateItemButton.set("disabled", true);
								deleteItemButton.set("disabled", true);
								
								allDayCB.set("disabled", true);
								allDayCB.set("checked", false, false);
								
								resizeEnabledCB.set("disabled", true);
								resizeEnabledCB.set("checked", false);
								
								moveEnabledCB.set("disabled", true);
								moveEnabledCB.set("checked", false);
								
								calendarEditor.set("disabled", true);
								
							}else{
								
								editedItem = lang.mixin({}, item);
								
								var allDay = item.allDay === true;
																
								itemSummaryEditor.set("value", item.summary);
								itemSummaryEditor.set("disabled", false);
								
								itemStartDateEditor.set("value", item.startTime);
								itemStartDateEditor.set("disabled", false);
								
								itemStartTimeEditor.set("value", item.startTime);
								itemStartTimeEditor.set("disabled", allDay);
								
								itemEndDateEditor.set("value", item.endTime);
								itemEndDateEditor.set("disabled", false);
								
								itemEndTimeEditor.set("value", item.endTime);
								itemEndTimeEditor.set("disabled", allDay);
								
								calendarEditor.set("value", item.calendar == "cal1" ? "Calendar 1" : "Calendar 2");
								
								updateItemButton.set("disabled", false);
								deleteItemButton.set("disabled", false);
								
								calendarEditor.set("disabled", false);	
								
								allDayCB.set("disabled", false);
								allDayCB.set("checked", allDay, false);
								
								resizeEnabledCB.set("disabled", false);
								resizeEnabledCB.set("checked", win.doc.appState.resizeDisabledMap[item.id] !== true);
								
								moveEnabledCB.set("disabled", false);
								moveEnabledCB.set("checked", win.doc.appState.moveDisabledMap[item.id] !== true);
							}

							var res = "";
							if(item == null){
								res = null;
							}else{
								var list = matrixView.get("selectedItems");
								for(var i=0; i<list.length; i++){
									res += list[i].summary;
									if(i != list.length-1){
										res += ", ";
									}
								}
							}
							addLogEntry("onChange", res);
						};
						

						allDayCB.on("change", function(value){
							
							itemStartTimeEditor.set("disabled", value);
							itemEndTimeEditor.set("disabled", value);
							var d;
							if(value){
								d = itemStartTimeEditor.get("value");
								matrixView.floorToDay(d, true);
								itemStartTimeEditor.set("value", d);
								d = itemEndTimeEditor.get("value");
								matrixView.floorToDay(d, true);
								itemEndTimeEditor.set("value", d);
								
								if(!matrixView.isStartOfDay(editedItem.endTime)){
									d = itemEndDateEditor.get("value");
									matrixView.floorToDay(d, true);
									d = matrixView.renderData.dateModule.add(d, "day", 1);
									itemEndDateEditor.set("value", d);
								}
								
							}else{
								editedItem.startTime.setHours(8);
								editedItem.endTime.setHours(9);
								itemStartTimeEditor.set("value", editedItem.startTime);
								itemEndTimeEditor.set("value", editedItem.endTime);
								d = itemEndDateEditor.get("value");
								matrixView.floorToDay(d, true);
								d = matrixView.renderData.dateModule.add(d, "day", -1);
								itemEndDateEditor.set("value", d);
							}
							
						});
						
						matrixView.on("change", function(e){
							onMatrixViewChange(e.newValue);
						});
						
						startDateEditor.on("change", function(value){
							matrixView.set("startDate", value);
						});
																	
						deleteItemButton.on("click", function(value){
							if (editedItem != null){
								matrixView.store.remove(editedItem.id);
								matrixView.selectedItem = null;
								onMatrixViewChange(null);
							}
						});
						
						updateItemButton.on("click", function(value){
							
							if (editedItem != null) {
								editedItem.summary = itemSummaryEditor.get("value");
								if(allDayCB.get("value")){
									if(!matrixView.isStartOfDay(editedItem.startTime)){
										editedItem.startTime = matrixView.floorToDay(itemStartDateEditor.get("value"), true);
									}
									if(!matrixView.isStartOfDay(editedItem.endTime)){
										editedItem.endTime = matrixView.floorToDay(itemEndDateEditor.get("value"), true);
									}			
									editedItem.allDay = true;						
								}else{
									editedItem.startTime = mergeDateTime(true);
									editedItem.endTime = mergeDateTime(false);
									delete editedItem.allDay;
								}
								
								var calValue = calendarEditor.get("value");
								editedItem.calendar = calValue == "Calendar 1" ? "cal1" : "cal2";
								matrixView.store.put(editedItem);
							}
							
						});

						dateFormatButton.on("click", function(){
							matrixView.set("rowHeaderDatePattern", rowHeaderFormatEditor.value);
							//matrixView.set("columnHeaderDatePattern", columnHeaderFormatEditor.value);
							
							matrixView.set("cellHeaderLongPattern", cellLongFormatEditor.value);
							matrixView.set("cellHeaderShortPattern", cellShortFormatEditor.value);
						});
						
						var formatItemTimeFunc = function(d, rd){
							return rd.dateLocaleModule.format(d, {
								selector: 'time', 
								timePattern: d.getMinutes() == 0 ? "ha":"h:mma"}
							).toLowerCase();
						};
						
						customTimeFormatCB.on("change", function(value){
							matrixView.set("formatItemTimeFunc", value ? formatItemTimeFunc : null);
						});
												
						matrixView.on("itemClick", function(e){
							addLogEntry("onItemClick", e.item.summary);
						});
						matrixView.on("itemDoubleClick", function(e){
							addLogEntry("onItemDoubleClick", e.item.summary);
						});
						matrixView.on("gridClick", function(e){
							addLogEntry("onGridClick", locale.format(e.date, {datePattern:"yyyy/MM/dd", timePattern:"h:mm"}));
						});
						matrixView.on("gridDoubleClick", function(e){
							addLogEntry("onGridDoubleClick", locale.format(e.date, {datePattern:"yyyy/MM/dd", timePattern:"h:mm"}));
						});

						var dataTip = new Tooltip({position:["below"], showDelay: 0});
						var timer;

						matrixView.on("itemRollOut", function(e){
							addLogEntry("onItemRollOut", e.item.summary);
							dataTip.close();
							if(timer){
								clearTimeout(timer);
							}
						});

						var getDataTipLabel = function(item){
							return "<b>" + item.summary + "</b><br/><table><tr><td style='text-align:right'>" + 
								"Start:</td><td>" + matrixView.renderData.dateLocaleModule.format(item.startTime, {formatLength: "short"}) + "</td></tr><tr><td style='text-align:right'>" + 
								"End:</td><td>" + matrixView.renderData.dateLocaleModule.format(item.endTime, {formatLength: "short"}) + "</td></tr></table>";
						};
						
						matrixView.on("focusChange", function(e){
							if(e.newValue){
								dataTip.set("label", getDataTipLabel(e.newValue));	
								var irs = matrixView.getRenderers(e.newValue);		
								if(irs != null){
									dataTip.open(irs[0].container);
								}
							}else{
								dataTip.close();
							}					
						}); 
												
						matrixView.on("itemRollOver", function(e){
							
							addLogEntry("onItemRollOver", e.item.summary);
														
							dataTip.set("label", getDataTipLabel(e.item));
							
							timer = setTimeout(function(){
								var irs = matrixView.getRenderers(e.item);
								if(irs != null){
									dataTip.open(irs[0].container);	
								}								
							}, 400); 
							
						});
						
						var editProperties = null;
												
						matrixView.on("itemEditBegin", function(e){							
							if(timer){
								clearTimeout(timer);
							}
							dataTip.close();
							addLogEntry("onItemEditBegin", e.item.summary);
							editProperties = {
								item: e.item
							};
						});
						
						matrixView.on("itemEditBeginGesture", function(e){
							addLogEntry("onItemEditBeginGesture", e.editKind + ", " + e.item.summary);							
						});
						
						var showDataTipAfterLayout = false;
												
						matrixView.on("renderersLayoutDone", function(){
							
							if(editProperties != null && showDataTipAfterLayout){
								var item = editProperties.item;
									
								// HACK: setting the label should dynamically set the content 
								dataTip.label = getDataTipLabel(item);
																
								showDataTipAfterLayout= false;
								
								var irs = matrixView.getRenderers(item);
								if(irs != null){
									dataTip.open(irs[0].container);	
								}
							}

						});
						
						matrixView.on("itemEditMoveGesture", function(e){
							showDataTipAfterLayout = true;
						});
						
						matrixView.on("itemEditEndGesture", function(e){
							addLogEntry("onItemEditEndGesture", e.editKind + ", " + e.item.summary);							
							
							onMatrixViewChange(e.item);

						});
						
						matrixView.on("itemEditEnd", function(e){
							addLogEntry("onItemEditEnd", e.item.summary + ", completed:" + e.completed);										
							showDataTipAfterLayout = true;													
						});
																	
						editableCB.on("change", function(value){
							matrixView.set("editable", value);
						});
						
						keyEditableCB.on("change", function(value){
							matrixView.set("keyboardEditable", value);
						});
						
						liveEditCB.on("change", function(value){
							matrixView.liveLayout = value;
						});
												
						allowSwapCB.on("change", function(value){							
							matrixView.allowStartEndSwap = value;
						});
						
						viewConstrainCB.on("change", function(value){							
							matrixView.stayInView = value;
						});											
												
						resizeEnabledCB.watch("disabled", function(oldV, newV){
							if (newV){
								domClass.remove("resizeEnabledCBLabel", "disabled");	
							}else{
								domClass.add("resizeEnabledCBLabel", "disabled");
							}							
						});

						moveEnabledCB.watch("disabled", function(oldV, newV){
							if (newV){
								domClass.remove("moveEnabledCBLabel", "disabled");	
							}else{
								domClass.add("moveEnabledCBLabel", "disabled");
							}
						});
						
						resizeEnabledCB.on("change", function(value){
							if (matrixView.selectedItem) {
								if (value){
									delete win.doc.appState.resizeDisabledMap[matrixView.selectedItem.id]	
								} else {
									win.doc.appState.resizeDisabledMap[matrixView.selectedItem.id] = true;
								}								
							}
						});

						moveEnabledCB.on("change", function(value){
							if (matrixView.selectedItem) {
								if (value){
									delete win.doc.appState.moveDisabledMap[matrixView.selectedItem.id]	
								} else {
									win.doc.appState.moveDisabledMap[matrixView.selectedItem.id] = true;
								}
							}
						});

						roundToDayCB.on("change", function(value){
							matrixView.set("roundToDay", value);
						});

						overlapEditor.on("change", function(value){
							matrixView.set("percentOverlap", this.value);
							vGapEditor.set("disabled", value!=0);
						});
						
						// the item to renderer kind functions.
						var itemToRendererKindFuncs = [
							null, 
							function(item){ return "horizontal"; },
							function(item){ return item.allDay ? "horizontal" : "label"},
							function(item){ return "label"}
						]; 
						
						rendererKindEditor.set("store", new Memory({data:[
							{id:0, label: "default"},
							{id:1, label: "All horizontals"},
							{id:2, label: "Only all day horizontals"},
							{id:3, label: "All labels"}
						]}));
						
						rendererKindEditor.watch("item", function(prop, oldValue, newValue){
							matrixView.set("itemToRendererKindFunc", itemToRendererKindFuncs[newValue.id]);
						});
												
						fx.fadeOut({
							node:"loadingPanel", 
							onEnd: function(node){
								node.parentNode.removeChild(node)
							}}).play(500);

					});
			});
			</script>
			
			<div id="loadingPanel" style="position:absolute;z-index:10;width:100%;height:100%;background:#ffffff;text-align: center">
				<span style="background: #DBEB8F">Loading...</span>
			</div>
			
			<div id="formDiv">
				
				<div data-dojo-type="dijit.TitlePane" title="Date Interval" class="formPanel">
					<table class="formTable">	
						<tr>
							<td>Start date:</td>
							<td><div data-dojo-id="startDateEditor" data-dojo-type="dijit.form.DateTextBox" style="width:80px" ></div></td>
						</tr>
						
						<tr>
							<td>Column count:</td>
							<td><div data-dojo-id="columnCountEditor" data-dojo-type="dijit.form.NumberSpinner" style="width:80px" constraints="{min:1, max:14}" value="7" intermediateChanges="true" onChange="matrixView.set('columnCount', this.value);"></div></td>
						</tr>
						
						<tr>
							<td>Row count:</td>
							<td><div data-dojo-id="rowCountEditor" data-dojo-type="dijit.form.NumberSpinner" style="width:80px" constraints="{min:1, max:14}" value="5" intermediateChanges="true" onChange="matrixView.set('rowCount', this.value);"></div></td>
						</tr>
					</table>
				</div>
				
				<div data-dojo-type="dijit.TitlePane" title="Main Properties" class="formPanel">
					<table class="formTable">
						<tr>
							<td class="smallText">
								<label for="roundToDayCB">Round to day:</label>
							</td>
							<td class="smallText">
								<input type="checkbox" data-dojo-id="roundToDayCB" data-dojo-type="dijit.form.CheckBox" checked="true"/>
							</td>
						</tr>
						
						<tr>
							<td>Overlap (%):</td>
							<td><div data-dojo-id="overlapEditor" data-dojo-type="dijit.form.NumberSpinner" value="0" constraints="{min:0, max:100}" intermediateChanges="true" smallDelta="10" style="width:80px" onChange="matrixView.set('percentOverlap', this.value);"></div></td>
						</tr>
						
						<tr>
							<td>Vertical gap (px):</td>
							<td><div data-dojo-id="vGapEditor" data-dojo-type="dijit.form.NumberSpinner" style="width:80px" constraints="{min:0, max:30}" value="4" intermediateChanges="true" onChange="matrixView.set('verticalGap', this.value);"></div></td>
						</tr>
						
						<tr>
							<td>Horiz. height (px):</td>
							<td><div data-dojo-id="hRendererHeightEditor" data-dojo-type="dijit.form.NumberSpinner" style="width:80px" constraints="{min:0, max:50}" value="17" intermediateChanges="true" onChange="matrixView.set('horizontalRendererHeight', this.value);"></div></td>
						</tr>

						<tr>
							<td>Labels height (px):</td>
							<td><div data-dojo-id="lRendererHeightEditor" data-dojo-type="dijit.form.NumberSpinner" style="width:80px" constraints="{min:0, max:50}" value="14" intermediateChanges="true" onChange="matrixView.set('labelRendererHeight', this.value);"></div></td>
						</tr>

						<tr>
							<td>Expand irs height (px):</td>
							<td><div data-dojo-id="eRendererHeightEditor" data-dojo-type="dijit.form.NumberSpinner" style="width:80px" constraints="{min:0, max:50}" value="15" intermediateChanges="true" onChange="matrixView.set('expandRendererHeight', this.value);"></div></td>
						</tr>

						<tr>
							<td>Selection mode:</td>
							<td>
								<select data-dojo-id="selectionModeEditor" data-dojo-type="dijit.form.ComboBox" style="width:80px;" onChange="matrixView.set('selectionMode', this.value);">
									<option>none</option>
									<option selected>single</option>
									<option>multiple</option>
								</select>
							</td>
						</tr>
						
						<tr>
							<td>Renderer kind:</td>
							<td>
								<select data-dojo-id="rendererKindEditor" data-dojo-type="dijit.form.ComboBox" style="width:80px;" searchAttr="label">
								</select>
							</td>
						</tr>
						<tr>
							<td>Text Dir:</td>
							<td>
								<select data-dojo-id="textDirEditor" data-dojo-type="dijit.form.ComboBox" style="width:80px;" onChange="matrixView.set('textDir', this.value);dataTip.set('textDir', this.value)">
									<option selected>auto</option>
									<option>ltr</option>
									<option>rtl</option>
								</select>
							</td>
						</tr>
					</table>
				</div>

				<div data-dojo-type="dijit.TitlePane" title="Date/Time Patterns" class="formPanel" open="false">
					<table class="formTable">
						<tr>
							<td>Row format:</td>
							<td><div data-dojo-id="rowHeaderFormatEditor" data-dojo-type="dijit.form.TextBox" style="width:110px" placeHolder="ex: w"></div></td>
						</tr>
						<!--<tr>
							<td>Column format:</td>
							<td><div data-dojo-id="columnHeaderFormatEditor" data-dojo-type="dijit.form.TextBox" style="width:110px" placeHolder="ex: EEE MMM, dd"></div></td>
						</tr>-->
						<tr>
							<td>Cell short format:</td>
							<td><div data-dojo-id="cellShortFormatEditor" data-dojo-type="dijit.form.TextBox" style="width:110px" placeHolder="ex: dd"></div></td>
						</tr>
						<tr>
							<td>Cell long format:</td>
							<td><div data-dojo-id="cellLongFormatEditor" data-dojo-type="dijit.form.TextBox" style="width:110px" placeHolder="ex: MMMM, dd"></div></td>
						</tr>
						<tr>
							<td class="smallText" >
								<label for="customTimeFormatCB">Time format ex:</label>
							</td><td>
								<input type="checkbox" data-dojo-id="customTimeFormatCB" data-dojo-type="dijit.form.CheckBox" checked="false" />
								
							</td>
						</tr>

						<tr>
							<td colspan="2" style="text-align:right;padding-top:5px;padding-right:5px"><button data-dojo-id="dateFormatButton" data-dojo-type="dijit.form.Button">Apply</button></td>
						</tr>
					</table>
				</div>
				
				<div data-dojo-type="dijit.TitlePane" title="Item Properties" class="formPanel" open="true">
					<table>
						<tr>
							<td colspan="2">
								<span style="font-size:0.9em">Summary:</span>
								<div data-dojo-id="itemSummaryEditor" data-dojo-type="dijit.form.TextBox" style="width:140px; margin-left: 10px" placeHolder="Summary..." disabled="true"></div>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<span style="font-size:0.9em">Calendar:</span>
								<select data-dojo-id="calendarEditor" data-dojo-type="dijit.form.ComboBox"  style="width:140px; margin-left: 12px"  disabled="true">
									<option>Calendar 1</option>
									<option>Calendar 2</option>
								</select>
							</td>
						</tr>
						
						<tr>
							<td colspan="2" class="smallText" >
								<input type="checkbox" data-dojo-id="allDayCB" data-dojo-type="dijit.form.CheckBox" checked="false" disabled="true" />
								<label for="allDayCB">All day</label>
							</td>
						</tr>
						
						<tr>
							<td style="padding-top:5px;font-size:0.9em">Start time:</td>
						</tr>
						
						<tr>
							<td style="text-align:right;">
								<div data-dojo-id="itemStartDateEditor" data-dojo-type="dijit.form.DateTextBox" style="width:100px;" disabled="true" ></div>
							</td>
							<td>
								<div data-dojo-id="itemStartTimeEditor" data-dojo-type="dijit.form.TimeTextBox" style="width:100px;" disabled="true" ></div>
							</td>
						</tr>

						<tr>
							<td style="padding-top:5px;font-size:0.9em">End time:</td>
						</tr>
						
						<tr>
							<td style="text-align:right;">
								<div data-dojo-id="itemEndDateEditor" data-dojo-type="dijit.form.DateTextBox" style="width:100px;" disabled="true" ></div>
							</td>
							<td>
								<div data-dojo-id="itemEndTimeEditor" data-dojo-type="dijit.form.TimeTextBox" style="width:100px;" disabled="true" ></div>
							</td>
						</tr>
						
						<tr>
							<td colspan="2" style="text-align:right;padding-top:5px;font-size:0.9em">
								<button data-dojo-id="deleteItemButton" data-dojo-type="dijit.form.Button" disabled="true">Remove</button>
								<button data-dojo-id="updateItemButton" data-dojo-type="dijit.form.Button" disabled="true">Update</button>
							</td>
						</tr>
					</table>	
				</div>
				
				<div data-dojo-type="dijit.TitlePane" title="Editing properties" class="formPanel" open="true">
					<table>
						<tr>
							<td colspan="2" class="smallText" >
								<input type="checkbox" data-dojo-id="liveEditCB" data-dojo-type="dijit.form.CheckBox" checked="false" />
								<label for="liveEditCB">Live layout</label>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="smallText" >
								<input type="checkbox" data-dojo-id="allowSwapCB" data-dojo-type="dijit.form.CheckBox" checked="true" />
								<label for="allowSwapCB">Allow start/end swap</label>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="smallText" >
								<input type="checkbox" data-dojo-id="editableCB" data-dojo-type="dijit.form.CheckBox" checked="true" />
								<label for="editableCB">Editable (global)</label>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="smallText" >
								<input type="checkbox" data-dojo-id="keyEditableCB" data-dojo-type="dijit.form.CheckBox" checked="true" />
								<label for="keyEditableCB">Keyboard Editable (global)</label>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="smallText" >
								<input type="checkbox" data-dojo-id="viewConstrainCB" data-dojo-type="dijit.form.CheckBox" checked="true" />
								<label for="viewConstrainCB">Stay in view (global)</label>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="smallText" >
								<input type="checkbox" data-dojo-id="moveEnabledCB" data-dojo-type="dijit.form.CheckBox" checked="false" disabled="true" />
								<label id="moveEnabledCBLabel" for="moveEnabledCB" class="disabled">Move Enabled (item)</label>
							</td>						
						</tr>
						<tr>
							<td colspan="2" class="smallText" >
								<input type="checkbox" data-dojo-id="resizeEnabledCB" data-dojo-type="dijit.form.CheckBox" checked="false" disabled="true" />
								<label id="resizeEnabledCBLabel" for="resizeEnabledCB" class="disabled">Resize Enabled (item)</label>
							</td>
						</tr>
						
						<tr>
							<td class="smallText">Snap (minutes):</td>
							<td>
								<select data-dojo-id="editingSnapEditor" data-dojo-type="dijit.form.ComboBox" style="width:80px;" onChange="matrixView.snapSteps = matrixView.keyboardLeftRightSteps = parseInt(this.value);">
									<option>5</option>
									<option>10</option>
									<option selected>15</option>
									<option>20</option>
									<option>30</option>
									<option>60</option>
									<option>120</option>
									<option>360</option>
									<option>720</option>
									<option>1440</option>
								</select>
							</td>
						</tr>
						
					</table>
				</div>
				
			</div>
						
			<div id="calendarNode"></div>
			
			<div id="eventLogPane" title="Calendar events" data-dojo-type="dijit.TitlePane" toggleable="false" >
							
				<div id="logTableContainer">
					<table id="logTable">
						<tbody id="logBody"></tbody>
					</table>		
				</div>
				
			</div>

	</body>
</html>
